<template>
  <div class="waitSite">
    <div class="change-span">
      <span
        class="change-item"
        @click.stop="changeSpan(0)"
        :class="{ active: type == 0 }"
        >等号中<span v-if="waitCount">({{ waitCount }}桌)</span></span
      >
      <span
        class="change-item"
        @click.stop="changeSpan(1)"
        :class="{ active: type == 1 }"
        >已上机</span
      >
      <span
        class="change-item"
        @click.stop="changeSpan(2)"
        :class="{ active: type == 2 }"
        >已作废</span
      >
    </div>
    <div class="list" v-if="list.length">
      <div
        class="item"
        @click.stop="changeStatus(it)"
        v-for="it in list"
        :key="it.id"
      >
        <div class="num">
          {{ it.num }}
        </div>
        <div class="right">
          <div class="areaName">区域:{{ it.area }}</div>
          <div class="phone" v-if="it.mobile">
            手机号:<a
              @click.stop=""
              target="_blank"
              :href="`tel:${it.mobile}`"
              >{{ it.mobile }}</a
            >
          </div>
          <div class="phone" v-else>--</div>
          <div class="phone">备注:{{ it.remark ? it.remark : "--" }}</div>
          <div class="time" v-if="it.type == 0">
            已等时长:{{ spanNow(it.addTime) }}
          </div>
          <!-- <div class="time" v-else>
            {{ it.type == 1 ? "上机时间" : "作废时间" }}:{{
              new Date(it.updateTime).Format("MM/dd hh:mm:ss")
            }}
          </div> -->
          <div class="time" v-else>
            {{ it.type == 1 ? "已上机" : "已作废" }}
          </div>
        </div>
      </div>
    </div>
    <div class="list" v-else>
      <div class="no-data">暂无数据</div>
    </div>
    <div class="btn-wrap">
      <span class="btn" @click.stop="addWait">添加排号</span>
    </div>
    <div class="mask" @click.stop="closeMask" v-if="showMask">
      <div class="mask-wrap form" @click.stop="" v-if="showForm">
        <div class="tit">添加排号</div>
        <div class="form-item">
          <span class="item-name">选择区域</span>
          <div class="item-val">
            <select name="" id="" v-model="form.areaId">
              <option :value="it.id" v-for="it in area" :key="it.id">
                {{ it.area }}
              </option>
            </select>
          </div>
        </div>
        <div class="form-item">
          <span class="item-name">手机号码</span>
          <div class="item-val">
            <input
              type="tel"
              v-model="form.mobile"
              placeholder="请输入手机号码"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="item-name">备注</span>
          <div class="item-val">
            <input type="text" v-model="form.remark" placeholder="请输入" />
          </div>
        </div>
        <div class="form-item">
          <button class="submit" @click.stop="submit">确认</button>
        </div>
      </div>
      <div class="status-wrap" v-if="showStatus" @click.stop="">
        <div class="status-item" @click.stop="doChangeStatus(1)">上机</div>
        <div class="status-item" @click.stop="doChangeStatus(2)">
          作废此排号
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "waitSite",
  data() {
    return {
      waitCount: 0,
      canClick: true,
      timer: null,
      list: [],
      type: 0,
      showStatus: false,
      showMask: false,
      showForm: false,
      storeId: "",
      area: [],
      areaNameMap: {},
      form: {
        areaId: "",
        area: "",
        mobile: "",
        remark: "",
        empName: "",
      },
    };
  },
  methods: {
    submit() {
      if (
        String(this.form.areaId) === "" ||
        String(this.form.areaId) === "undefined"
      ) {
        this.$message({
          message: "请选择区域",
          customClass: "error",
        });
        return;
      }
      if (
        this.form.mobile &&
        String(this.form.mobile) != "undefined" &&
        String(this.form.mobile) != "null" &&
        !/^1[1｜2｜3|4|5|6|7|8|9][0-9]{9}$/.test(this.form.mobile)
      ) {
        this.$message.error({
          message: "请输入正确的手机号",
          customClass: "error",
        });
        return;
      }
      let phone = localStorage.getItem("phone");
      let employeeName = localStorage.getItem("employeeName");
      if (!this.canClick) {
        return;
      }
      this.canClick = false;
      this.$http({
        url: "get/num",
        method: "POST",
        data: {
          storeId: this.storeId,
          ...this.form,
          area: this.areaNameMap[this.form.areaId],
          empName: `${employeeName}(${phone})`,
        },
      })
        .then((res) => {
          setTimeout(() => {
            this.canClick = true;
          }, 500);
          this.getData();
          this.toggleSth(false);
          this.form.mobile = "";
          this.form.remark = "";
        })
        .catch((err) => {
          setTimeout(() => {
            this.canClick = true;
          }, 500);
        });
    },
    addWait() {
      this.showMask = true;
      this.showForm = true;
    },
    changeStatus(item) {
      if (item.type != 0) {
        return;
      }
      this.nowSelItem = item;
      this.showMask = true;
      this.showStatus = true;
    },
    doChangeStatus(type) {
      if (!this.canClick) {
        return;
      }
      this.canClick = false;
      this.$http({
        url: "update/schedul",
        method: "POST",
        data: {
          id: this.nowSelItem.id,
          type,
        },
      })
        .then((res) => {
          setTimeout(() => {
            this.canClick = true;
          }, 500);
          this.closeMask();
          this.getData();
        })
        .catch((err) => {
          setTimeout(() => {
            this.canClick = true;
          }, 500);
        });
    },
    closeMask() {
      this.toggleSth(false);
    },
    toggleSth(flag) {
      this.showForm = flag;
      this.showMask = flag;
      this.showStatus = flag;
    },
    getArea() {
      this.$http({
        url: "schedul/area/list",
        method: "GET",
        params: {
          storeId: this.storeId,
        },
      }).then((res) => {
        console.log(res);
        if (res.data && Array.isArray(res.data) && res.data.length) {
          this.area = res.data;
          let areaNameMap = {};
          res.data.forEach((it) => {
            areaNameMap[it.id] = it.area;
          });
          this.areaNameMap = areaNameMap;
        }
      });
    },
    changeSpan(type) {
      this.type = type;
      this.getData();
    },
    getData() {
      this.$http({
        url: "schedul/list",
        method: "POST",
        data: {
          storeId: this.storeId,
          type: this.type,
        },
      }).then((res) => {
        this.list = res.data;
        this.getWaitCount();
      });
    },
    getWaitCount() {
      this.$http({
        url: "schedul/list",
        method: "POST",
        data: {
          storeId: this.storeId,
          type: "0",
        },
      }).then((res) => {
        if (res.data && Array.isArray(res.data)) {
          this.waitCount = res.data.length;
        }
      });
    },
    spanNow(time) {
      let nowTime = new Date().getTime();
      let addTime = new Date(time).getTime();
      let spanTime = nowTime - addTime;
      let hour = 60 * 1000 * 60;
      let min = 60 * 1000;
      let sec = 1000;
      let hours = Math.floor(spanTime / hour);
      let mins = Math.ceil((spanTime % hour) / min);
      if (hours < 0) {
        return `0小时0分`;
      }
      return `${hours}小时${mins}分`;
    },
  },
  created() {
    this.storeId = localStorage.getItem("storeId");
    this.getData();
    this.getWaitCount();
    this.timer = setInterval(() => {
      this.getData();
      this.getWaitCount();
    }, 60 * 1000);
    this.getArea();
  },
  destroyed() {
    if (this.timer) {
      console.log("clear timer");
      clearInterval(this.timer);
    }
  },
};
</script>
<style lang="scss" scoped>
.waitSite {
  width: 100%;
  height: 100%;
  font-size: 0.32rem;
  box-sizing: border-box;
  .change-span {
    width: 100%;
    height: 1rem;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .change-item {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 2px solid #f2f2f2;
      color: #999;
      &.active {
        color: #333;
        border-color: #dc6060;
      }
    }
  }
  .list {
    height: calc(100% - 1rem);
    overflow: hidden;
    overflow-y: auto;
    padding: 0 0.24rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
    .item {
      width: 100%;
      min-height: 2rem;
      background-color: #f4f4f4;
      margin-top: 0.3rem;
      border-radius: 0.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.1rem;
      box-sizing: border-box;
      .areaName{
        font-weight: bold;
        color: rgb(59, 99, 220);
      }
      .num {
        width: 1.3rem;
        height: 1.3rem;
        background-color: #f38034;
        border-radius: 0.65rem;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.34rem;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(100% - 1.3rem);
        text-align: right;
        font-size: 0.28rem;
        min-height: 1.4rem;
        a {
          color: #333;
        }
        .phone {
          display: inline-block;
        }
        .time {
          color: #dc6060;
        }
      }
    }
  }
  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 1);
    border-top: 1px solid #ddd;
    box-shadow: 0 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.159);
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(100% - 0.48rem);
      background-color: #dc6060;
      height: 1rem;
      border-radius: 0.1rem;
      color: #fff;
      font-size: 0.28rem;
      letter-spacing: 3px;
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    .mask-wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      &.form {
        width: 80%;
        background-color: #fff;
        border-radius: 0.1rem;
        .tit {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 1rem;
          font-weight: bold;
        }
        .form-item {
          padding: 0.24rem;
          box-sizing: border-box;
          .item-name {
            font-size: 0.3rem;
            color: #dc6060;
          }
          .item-val {
            padding-top: 0.24rem;
            select,
            input {
              width: 100%;
              height: 0.8rem;
              box-sizing: border-box;
              background-color: #fff;
              outline: none;
              border: none;
              border: 1px solid #ddd;
              padding-left: 0.24rem;
              font-size: 0.3rem;
            }
          }
          .submit {
            width: 100%;
            height: 0.8rem;
            background-color: #dc6060;
            border: none;
            color: #fff;
            border-radius: 0.1rem;
          }
        }
      }
    }
    .status-wrap {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      .status-item {
        height: 1rem;
        background-color: #fff;
        border-bottom: 1px solid #ddd;
        font-size: 0.28rem;
        display: flex;
        justify-content: center;
        align-items: center;
        &:last-child {
          color: red;
          border: none;
        }
      }
    }
  }
  .no-data {
    text-align: center;
    padding: 0.24rem;
    font-size: 0.24rem;
    color: #999;
  }
}
</style>